<template>
    <div>
        <div class="title-box">
            <van-image
                round
                :src="user.headimgurl"
                :show-error="true"
                :error-icon="require('@/assets/err.jpg')"
                class="user-icon"
            />
            <p>{{user.nickname}}</p>
        </div>
        <!-- <div class="myhelp__info">
            <div class="myhelp__info__piece">
                <p>
                    <span>1</span>
                    <br />捐款次数
                </p>
            </div>
            <div class="myhelp__info__piece">
                <p>
                    <span>1</span>
                    <br />总金额(元)
                </p>
            </div>
            <div class="myhelp__info__piece">
                <p>
                    <span>1</span>
                    <br />捐款项目
                </p>
            </div>
        </div>-->
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <div class="content">
                <div class="myfundrais__content" v-if="myfundrais.length>0">
                    <div
                        class="myfundrais__piece"
                        v-for="(item,index) in myfundrais"
                        :key="index"
                        @click="toDetail(item.prepare_id)"
                    >
                        <div class="piece__top">
                            <p>
                                捐款
                                <span>{{item.donator_money}}元</span>
                                <i>{{item.create_time}}</i>
                            </p>
                        </div>
                        <div class="piece__center">
                            <van-image
                                :src="'http://user-prepare.oss-cn-beijing.aliyuncs.com/' + item.prepare_pic_url.split(',')[0]"
                                :show-error="true"
                                :error-icon="require('@/assets/err.jpg')"
                                class="img"
                            />
                            <div class="raises__piece__content__text">
                                <h5>{{item.prepare_title}}</h5>
                                <div class="progress-box">
                                    <van-progress
                                        pivot-text
                                        color="#ff5e10"
                                        :percentage="(item.total/item.prepare_money)"
                                    />
                                </div>
                                <div class="moneybox">
                                    <p class="money--achieve">
                                        已筹
                                        <span>{{item.total}}</span>元
                                    </p>
                                    <p class="money--target">
                                        目标
                                        <span>{{item.prepare_money}}</span>元
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="myfundrais__nodata" v-else>
                    <img src="@/assets/nodata.png" alt />
                    <h4>暂时没有捐款记录</h4>
                    <p class="nodata-button" @click="toHome()">我也要捐款</p>
                </div>
            </div>
        </van-list>
    </div>
</template>

<script>
import { Progress, List, Image } from "vant";
import { customerInfo, userFundraisingDonateList } from "@/api/api";
export default {
    components: {
        [Progress.name]: Progress,
        [List.name]: List,
        [Image.name]: Image
    },
    data() {
        return {
            user: {},
            myfundrais: [],
            page: 1,
            loading: false,
            finished: true
        };
    },
    created() {
        customerInfo().then(res => {
            if (res.code) {
                this.user = res.results;
            } else {
                Toast(res);
            }
        });
        this.getData();
    },
    methods: {
        onLoad() {
            this.page++;
            this.getData();
        },
        getData() {
            userFundraisingDonateList({
                pageNum: this.page
            }).then(res => {
                if (res.code) {
                    for (let i of res.results) {
                        this.myfundrais.push(i);
                    }
                    if (res.results.length > 0) {
                        this.finished = false;
                    } else {
                        this.finished = true;
                    }
                    this.loading = false;
                } else {
                    Toast(res);
                }
            });
        },
        toHome() {
            this.$router.push({ path: "/Home" });
        },
        toDetail(id) {
            this.$router.push({
                path: "/Detail",
                query: { id: id }
            });
        }
    }
};
</script>

<style scoped>
.myhelp__info {
    margin: 60px 6.4% 0;
    width: 87.2%;
    border-radius: 0.88888889rem;
    display: flex;
    justify-content: space-between;
    background: rgba(0, 0, 0, 0.04);
    padding: 18px 24px;
    box-sizing: border-box;
}
.myhelp__info__piece p {
    text-align: center;
    font-size: 12px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1;
}
.myhelp__info__piece p span {
    font-size: 24px;
    font-family: PingFangSC-Semibold;
    font-weight: bold;
    color: #ff3c3c;
    line-height: 1.6;
    display: inline-block;
    margin-bottom: 6px;
}
.content {
    padding-top: 20px;
    margin-top: 60px;
}
.piece__top p {
    font-size: 16px;
    font-family: PingFangSC-Semibold;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.8);
    line-height: 60px;
}
.piece__top p span {
    display: inline-block;
    font-size: 16px;
    font-family: PingFangSC-Semibold;
    color: #ff3c3c;
    margin: 0 8px;
}
.piece__top p i {
    font-style: normal;
    font-size: 12px;
    font-family: PingFangSC-Regular;
    color: rgba(0, 0, 0, 0.32);
    line-height: 1;
}
</style>